
<template>
  <div
    v-show="element.key"
    class="drag-wrap"
    @click.stop="selectCurrent(element.key)"
  >
    <div
      :class="['component', element.key == lowCode.currentKey ? 'active' : '']"
    >
      <div class="mover">
        <i class="iconfont icon-drag"></i>
      </div>
      <div class="tips">
        <a-tooltip
          effect="dark"
          placement="top"
        >
        <template #title>{{ element?.describe || '未知描述' }}</template>
          {{ element && element.component }}
        </a-tooltip>
      </div>
      <slot></slot>
      <div class=""></div>
      <div class="up" @click.stop="findParent">
        <i class="iconfont icon-zhuanwan"></i>
      </div>
      <div class="copy" @click.stop="copy">
        <i class="iconfont icon-fuzhi"></i>
      </div>
      <div class="remove" @click.stop="remove">
        <i class="iconfont icon-shanchu"></i>
      </div>
    </div>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref, Ref, nextTick, reactive, toRefs } from "vue";
import type { ComponentImp } from "@/components/low-code/core/index";
import type { LowCodeImp } from "@/components/low-code/core/type";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";

export default defineComponent({
  props: ["element", "parent", "index","fatherComponent"],
  inject: ["getLowCodeInstance"],
  computed: {
    lowCode(): LowCodeImp {
      return (
        this as unknown as { getLowCodeInstance: Function }
      ).getLowCodeInstance() as LowCodeImp;
    },
    component() {
      return this.lowCode.dataCenter[this.element.key];
    },
    activeColor() {
      if (this.element.key == this.lowCode.currentKey) {
        return { outline: "2px solid #e6a23c", border: "1px solid #e6a23c" };
      }

      return "";
    },
  },
  methods: {
    findParent() {
      let parentKey = this.fatherComponent?.key?? this.parent?.key;
      if (parentKey) {
        this.lowCode.dataCenter[parentKey]?.updateMetaRefresh();
      } else {
        this.lowCode.updateMetaRefresh();
      }
      this.$nextTick(() => {
        this.lowCode.setcurrentKey(parentKey);
      });
    },
    copy() {
      let newElement =  this.component.copyItem(this.element, true);
      (this.parent.items as Array<ComponentImp>).splice(
        this.index as number,
        0,
        newElement
      );
      // this.$nextTick(() => {
      //   this.lowCode.setcurrentKey(newElement.key);
      // });
      tools.handleStack.push(clone(this.lowCode));
    },
    remove() {
      this.component.removeItem(this.element.key);
      (this.parent.items as Array<ComponentImp>).splice(this.index as number, 1);
      this.$nextTick(() => {
        this.lowCode.setcurrentKey("");
      });
      tools.handleStack.push(clone(this.lowCode));
    },
    selectCurrent() {
      this.lowCode.setcurrentKey(this.element.key);
    },
  },
  data() {
    return {
      color: "#e6a23c",
    };
  },
  mounted() {
    if (this.element && this.element.group && this.element.group == "base") {
      this.color = "#409eff";
    } else if (
      this.element &&
      this.element.group &&
      this.element.group == "custom"
    ) {
      this.color = "#3a0de7";
    }
  },
  setup(props, { attrs }) {
    return {};
  },
});
</script>

<style   scoped>
* {
  margin: 0;
  padding: 0;
}
.drag-wrap {
  padding: 5px;
}
.component {
  padding: 5px 10px;
  flex-grow: 1;
  line-height: 32px;
  position: relative;
}

.drawing-board .component {
  border: 1px dashed #999;
  margin: 2px;
}

.mover {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  left: -1px;
  top: -1px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: v-bind(color);
  color: white;
}

.remove {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 12px;
  bottom: -12px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: #ffebeb;
  color: #fc5757;
  border-radius: 50%;
}

.copy {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 45px;
  bottom: -12px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: #cbe8ff;
  color: #7dc4f9;
  border-radius: 50%;
}

.up {
  width: 24px;
  line-height: 24px;
  text-align: center;
  position: absolute;
  right: 78px;
  bottom: -12px;
  cursor: pointer;
  display: none;
  z-index: 100;
  background: #c7ede3;
  color: #27c217;
  border-radius: 50%;
}

.tips {
  width: fit-content;
  text-align: center;
  position: absolute;
  top: -1px;
  right: -1px;
  display: none;
  z-index: 100;
  background: v-bind(color);
  color: white;
  font-size: 0.3em;
  line-height: 1;
  padding: 5px 8px;
  cursor: help;
}

.active {
  outline: 2px solid v-bind(color);
  border: 1px solid v-bind(color);
}
.active > .mover {
  display: block;
}
.active > .remove {
  display: block;
}

.active > .copy {
  display: block;
}

.active > .up {
  display: block;
}

.active > .tips {
  display: block;
}
</style>
